<template>
  <div class="webheart user-center">
    <div class="user-ornament">
      <div class="webheart">
        <div class="crumbs-wrap">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="clearfix">
                <div class="crumbs fl">
                  <h2>
                    <span class="iconfont icon-gerenziliao"></span> 用户空间
                  </h2>
                </div>
                <div class="user-info-box fl" @click="routeTo('user-center')">
                  <div class="fl user-info-hed">
                    <img :src="userPture || headPic" />
                  </div>

                  <div class="fl user-info-material">
                    <p>
                      <span class="user-info-name">{{ username }}</span>
                    </p>
                    <p class="two-ellipsis" :title="deptName">{{ deptName }}</p>
                    <p class="topage">详情 >></p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div
                class="user-audit-box clearfix icon_top2"
                @click="routeTo('user-message')"
              >
                <div class="fl user-audit-hed">
                  <img src="../../../assets/users/top2.png" />
                </div>
                <div class="fl user-audit-totl">
                  <p class="user-audit-num">{{ spaceCount.msgCount }}</p>
                  <p class="user-audit-title">我的消息</p>
                </div>
              </div>
            </el-col>
            <el-col :span="4" class="border-non">
              <div
                class="user-audit-box clearfix icon_top3"
                @click="routeTo('user-review')"
              >
                <div class="fl user-audit-hed">
                  <img src="../../../assets/users/top3.png" />
                </div>
                <div class="fl user-audit-totl">
                  <p class="user-audit-num">{{ spaceCount.reviewCount }}</p>
                  <p class="user-audit-title">我的待评审</p>
                </div>
              </div>
            </el-col>
            <el-col :span="4" class="border-non">
              <div
                class="user-audit-box clearfix icon_top4"
                @click="routeTo('user-audit')"
              >
                <div class="fl user-audit-hed">
                  <img src="../../../assets/users/top4.png" />
                </div>
                <div class="fl user-audit-totl">
                  <p class="user-audit-num">{{ spaceCount.auditCount }}</p>
                  <p class="user-audit-title">我的待审核</p>
                </div>
              </div>
            </el-col>
            <el-col :span="4" class="border-non">
              <div class="user-audit-box clearfix icon_top5">
                <div class="fl user-audit-hed">
                  <img src="../../../assets/users/top5.png" />
                </div>
                <div class="fl user-audit-totl" @click="outStyle()">
                  <p class="user-audit-num">{{ spaceCount.dataCount }}</p>
                  <p class="user-audit-title">
                    我的数据
                    <i
                      class="el-icon-arrow-down"
                      v-if="mouseoutShow == false"
                    ></i>
                    <i v-if="mouseoutShow == true" class="el-icon-arrow-up"></i>
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <transition name="fade">
      <div class="user-center-main" v-if="mouseoutShow == true">
        <div class="user-info-menustotal clearfix">
          <template v-for="(v, index) in menustotal">
            <div
              class="menustotal-item fl"
              :key="index"
              v-if="v.isShow"
              @click="routeToNew(v)"
            >
              <p class="menustotal-item-total" :style="{ color: v.color }">{{
                v.num
              }}</p>
              <p class="menustotal-item-line">
                <span></span>
              </p>
              <p
                class="menustotal-item-name"
                :style="{ background: v.color }"
                >{{ v.name }}</p
              >
            </div>
          </template>
        </div>
      </div>
    </transition>
    <div class="user-info-iconWrap clearfix">
      <div class="quick-menu-btn">
        <SetQuickMenu />
      </div>
      <div class="user-info-learn learn-search" @click="routeTo('index')">
        <img src="../../../assets/users/l1.png" />
      </div>
      <div
        class="user-info-learn learn-online"
        @click="routeTo('learn-center')"
      >
        <img src="../../../assets/users/icon8.png" />
        <p>在线学习</p>
      </div>
      <div class="icon-wrap">
        <!-- <QuickMenu /> -->
        <div class="user-info-icon fl">
          <template v-for="(v, index) in manageIcon">
            <div
              class="icon-item fl"
              :key="index"
              :style="{ background: v.color }"
              @click="routeToNew(v)"
              v-if="v.isShow"
            >
              <img :src="v.img" alt />
              <p class="icon-item-name">{{ v.name }}</p>
            </div>
          </template>
        </div>
        <div class="user-info-icon fl">
          <template v-for="(v, index) in setIngIcon">
            <div
              class="icon-item fl"
              :key="index"
              :style="{ background: v.color }"
              @click="routeToNew(v)"
              v-if="v.isShow"
            >
              <img :src="v.img" alt />
              <p class="icon-item-name">{{ v.name }}</p>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mySpaceQuery } from '@/api/http'
import userInfo from '@/mixins/userInfo.js'
// import webinfo from '@/mixins/webinfo.js'
import { mapGetters } from 'vuex'
import { menustotal, manageIcon, setIngIcon } from './baseData'
import webMenu from '@/mixins/webMenu.js'
export default {
  mixins: [userInfo,   webMenu],
  components: {
    QuickMenu: () => import('./QuickMenu.vue'),
    SetQuickMenu: () => import('./SetQuickMenu.vue'),
  },
  data() {
    return {
      spaceCount: {
        msgCount: 0,
        auditCount: 0,
        reviewCount: 0,
        dataCount: 0,
      },
      menustotal,
      manageIcon,
      setIngIcon,
      userInfo: {},
      deptName: '',
      mouseoutShow: false,
    }
  },
  computed: mapGetters([
    'username',
    'headPic',
    'userPture',
    'deptFullData',
    'menuTree',
  ]),
  mounted() {
    this.init()
    this.queryList()
    this.permission()
    this.permissionSystem()
  },
  methods: {
    permission() {
      let menuData = this.$store.getters.menuData
      menuData.forEach((e) => {
        this.manageIcon.forEach((v) => {
          if (e.id == v.id) {
            v.name = e.name
          }
        })
        this.setIngIcon.forEach((v) => {
          if (e.id == v.id) {
            v.name = e.name
          }
        })
      })
      //元素库管理
      this.manageIcon[0].isShow = menuData.filter((v) => v.id == 692).length > 0
      this.menustotal[0].isShow = menuData.filter((v) => v.id == 692).length > 0
      let shareData = menuData.filter((v) => v.id == 712)
      if (
        shareData &&
        shareData.length &&
        shareData[0].hasOwnProperty('childList')
      ) {
        let shareChildList = shareData[0].childList
        //专题库管理
        this.manageIcon[1].isShow =
          shareChildList.filter((v) => v.id == 713).length > 0
        this.menustotal[1].isShow =
          shareChildList.filter((v) => v.id == 713).length > 0
        //示范微视频管理
        this.manageIcon[2].isShow =
          shareChildList.filter((v) => v.id == 714).length > 0
        this.menustotal[2].isShow =
          shareChildList.filter((v) => v.id == 714).length > 0
      }
      //培训资源管理
      this.manageIcon[3].isShow = menuData.filter((v) => v.id == 60).length > 0
    },
    permissionSystem() {
      let menuData = this.$store.getters.menuData
      this.setIngIcon.forEach((v) => {
        v.isShow = menuData.filter((m) => m.id == v.id).length > 0
      })
    },
    findFullDept(obj) {
      if (obj.hasOwnProperty('childList')) {
        return this.findFullDept(obj.childList[0])
      } else {
        return obj.deptFullnamepath
      }
    },
    init() {
      let deptFullData = this.findFullDept(this.deptFullData)
      if (deptFullData) {
        deptFullData = deptFullData.split('/')
        this.deptName = deptFullData[deptFullData.length - 2]
      } else {
        this.deptName = '暂无部门'
      }
    },
    routeTo(name) {
      this.$router.push({
        name: name,
      })
    },
    routeToNew(v) {
      let arr = [
        'share-library',
        'training-library',
        'learn-center',
        'user-data',
        'user-download',
        'user-collect',
      ]
      if (arr.indexOf(v.path) != -1) {
        this.routeTo(v.pathName)
        return
      }
      let asyncRoute = JSON.parse(this.getSession('asyncRoute'))
      if (asyncRoute.length) {
        let newRoute = asyncRoute[0].children.filter(
          (item) => item.path.indexOf(v.path) != -1,
        )
        if (newRoute.length) {
          let newRouteName = newRoute[0].children[0].name
          this.routeTo(newRouteName)
        }
      }
    },
    // 点击显示
    outStyle() {
      this.mouseoutShow = !this.mouseoutShow
    },
    queryList() {
      mySpaceQuery().then((res) => {
        let { data } = res.data
        if (!data) return

        this.spaceCount.msgCount = data.filter((v) => v.type == 1)[0].num
        this.spaceCount.reviewCount = data.filter((v) => v.type == 2)[0].num
        this.spaceCount.auditCount = data.filter((v) => v.type == 3)[0].num
        this.spaceCount.dataCount = data.filter((v) => v.type == 4)[0].totalNum

        this.menustotal[0].num = data.filter((v) => v.type == 11)[0].totalNum
        this.menustotal[1].num = data.filter((v) => v.type == 12)[0].totalNum
        this.menustotal[2].num = data.filter((v) => v.type == 13)[0].totalNum
        this.menustotal[3].num = data.filter((v) => v.type == 14)[0].totalNum
        this.menustotal[4].num = data.filter((v) => v.type == 15)[0].totalNum
        this.menustotal[5].num = data.filter((v) => v.type == 16)[0].totalNum
        this.menustotal[6].num = data.filter((v) => v.type == 17)[0].totalNum
      })
    },
  },
}
</script>
<style scoped lang="scss">
.user-center {
  margin-bottom: 50px;
  h2 {
    color: #333;
    font-size: 20px;
    line-height: 18px;
    width: 1em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    span {
      color: #1364c7;
      font-size: 18px;
      margin-right: 10px;
    }
  }
  .user-ornament {
    background-size: cover;
    background: #f3f0f0;
    border: 1px solid #d9d0d0;
    box-shadow: 0 2px 12px 0 #bfbbbb;
    .crumbs-wrap {
      margin-left: 0;
      padding-top: 30px;
      height: 100px;
      .el-row {
        width: 1400px;
        .el-col-4 {
          width: 16%;
          text-align: center;
          margin-left: 35px;
        }
      }
      @media screen and (max-width: 1400px) {
        .el-row {
          width: 1200px;

          .el-col-4 {
            margin-left: 0;
          }
        }
      }
    }
    h2 {
      font-size: 16px;
      span {
        color: #1364c7;
      }
    }
    .crumbs.fl {
      margin-right: 30px;
    }
  }
}
.user-center-main {
  height: 120px;
  border-radius: 5px;
  background-color: #eef1f5;
  padding: 20px 80px;
}

.el-col.el-col-8 {
  border-right: 1px solid #b8d1ee;
}
.border-non.el-col.el-col-8 {
  border-right: none;
}
.user-info-box {
  cursor: pointer;
  margin-top: 10px;
}
.user-info-box,
.user-audit-box {
  .user-info-hed,
  .user-audit-hed {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.user-info-hed {
  img {
    border-radius: 50%;
  }
}

.user-info-material {
  max-width: 165px;
  margin-left: 20px;
  margin-top: 0px;
  .user-info-name {
    font-size: 20px;
    font-weight: 900;
    color: #000;
    display: inline-block;
  }
  .user-info-role {
    background: #e4490c;
    padding: 1px 12px;
    border-radius: 50px;
    display: inline-block;
    line-height: 20px;
    font-size: 12px;
    vertical-align: 4px;
  }
  p {
    line-height: 22px;
    color: #000;
  }
  .topage {
    font-size: 12px;
    color: #000;
  }
}
.user-audit-box {
  .user-audit-hed {
    background: #0b52a4;
    text-align: center;
    img {
      width: 25px;
      height: 25px;
      margin-top: 17px;
    }
  }

  .user-audit-totl {
    color: #fff;
    margin-left: 20px;
    cursor: pointer;
    .user-audit-num {
      font-size: 32px;
      font-weight: 900;
    }
    .user-audit-title {
    }
  }
}
.user-info-menustotal {
  width: 1400px;
  margin: 0 auto;
  margin-top: 30px;
  padding-left: 110px;
  .menustotal-item {
    color: #fff;
    width: 12%;
    cursor: pointer;
    text-align: center;
    padding: 0 5px;
    .menustotal-item-total {
      text-align: center;
      font-size: 40px;
      font-weight: 900;
      line-height: 1px;
      margin-bottom: 15px;
    }
    .menustotal-item-name {
      padding: 4px 18px;
      border-radius: 50px;
      background: #d45151;
      display: inline-block;
    }
    .menustotal-item-line {
      text-align: center;
      height: 15px;
      margin-bottom: 10px;
      span {
        display: inline-block;
        width: 20px;
        height: 1px;
        background: #619ada;
      }
    }
  }
  @media screen and (max-width: 1350px) {
    .menustotal-item {
      width: 11%;
    }
  }
}

.user-info-iconWrap {
  position: relative;
  padding-left: 6px;
  width: 1400px;
  margin: 0 auto;
  padding-top: 100px;
  min-height: 420px;
  .user-info-icon {
    // margin-left: 30px;
    width: 100%;
  }
  .quick-menu-btn {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 10;
  }
  .learn-search {
    position: absolute;
    left: 0;
    top: 100px;
  }
  .learn-online {
    position: absolute;
    right: 0;
    top: 100px;
    width: 320px;
    height: 308px;
    background: #28d280;
    color: #fff;
    font-size: 22px;
    border-radius: 10px;
    text-align: center;
    img {
      margin-top: 75px;
    }
  }
  .icon-wrap {
    width: 100%;
    padding: 0 340px;
    box-sizing: border-box;
  }
  .icon-item {
    margin: 0 2.5%;
    text-align: center;
    padding-bottom: 15px;
    width: 20%;
    height: 125px;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-weight: 900;
    margin-bottom: 40px;
    img {
      width: 45px;
      margin-top: 40px;
      min-height: 50px;
    }
  }
  p {
    padding-top: 5px;
  }
}
.user-info-learn {
  cursor: pointer;
}
.user-info-learn.fl img {
  width: 300px;
  height: 320px;
}
.webheart.user-center {
  width: 100%;
}
@media screen and (max-width: 1350px) {
  .webheart.user-center {
    width: auto;
    overflow: hidden;
  }
}
.user-audit-box.clearfix.icon_top2 .user-audit-hed {
  background: #d45151;
}
.user-audit-box.clearfix.icon_top3 .user-audit-hed {
  background: #f09621;
}
.user-audit-box.clearfix.icon_top4 .user-audit-hed {
  background: #18bdc7;
}
.user-audit-box.clearfix.icon_top5 .user-audit-hed {
  background: #28d280;
}
.user-audit-box.clearfix.icon_top2 .user-audit-totl {
  color: #d45151;
}
.user-audit-box.clearfix.icon_top3 .user-audit-totl {
  color: #f09621;
}
.user-audit-box.clearfix.icon_top4 .user-audit-totl {
  color: #18bdc7;
}
.user-audit-box.clearfix.icon_top5 .user-audit-totl {
  color: #28d280;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.user-audit-box {
  margin-top: 10px;
}
@media screen and (max-width: 1350px) {
  .user-center-main {
    padding: 20px 10px;
  }
  .user-info-menustotal {
    padding-left: 0px;
  }
}
</style>
